<template>
  <!-- #ifdef H5 -->
  <template v-if="customizeTag === 'grid-item'">
    <grid-item
      v-bind="$attrs"
      :tag="customizeTag"
      :x="x"
      :y="y"
      :w="w"
      :h="h"
      :i="i"
      @resize="onResize"
      @move="onMove"
      :class="{ highlight: isHighLight }"
    ><!-- 
      @click.stop="onClick" -->
      <template #default>
        <slot></slot>
      </template>
    </grid-item>
  </template>
  <el-col v-else v-bind="$attrs" :tag="customizeTag">
    <template #default>
      <slot></slot>
    </template>
  </el-col>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <uni-col v-bind="$attrs">
    <template #default>
      <slot></slot>
    </template>
  </uni-col>
  <!-- #endif -->
</template>
<script>
  export default {
    inheritAttrs: false,
    name: "gd-col",
  };
</script>
<script setup>
  // #ifdef H5
  import { ElCol } from "element-plus";
  import "element-plus/theme-chalk/el-col.css";
  import { GridItem } from "vue3-drr-grid-layout";
  import "vue3-drr-grid-layout/dist/style.css";
  // #endif
  import { computed, useAttrs, watch } from "vue";
  import { debounce } from "@gd-accbuild-core/config/utils";
  const props = defineProps({
    isWrappedByGridLayout: {
      type: Boolean,
      default: false,
    },
    gridLayoutConfig: {
      type: Object,
      default: () => ({}),
    },
    idxRoute: {
      type: Array,
    },
  });
  const customizeTag = computed(() => {
    return props.isWrappedByGridLayout ? "grid-item" : "div";
  });
  const x = computed(() => {
    return props.gridLayoutConfig.x ? props.gridLayoutConfig.x : 0;
  });
  const y = computed(() => {
    return props.gridLayoutConfig.y ? props.gridLayoutConfig.y : 0;
  });
  const w = computed(() => {
    return props.gridLayoutConfig.w ? props.gridLayoutConfig.w : 0;
  });
  const h = computed(() => {
    return props.gridLayoutConfig.h ? props.gridLayoutConfig.h : 0;
  });
  const i = computed(() => {
    return props.gridLayoutConfig.i ? props.gridLayoutConfig.i : 0;
  });
  const isHighLight = computed(() => {
    return props.gridLayoutConfig?.highLightIdRef?.value === i.value; //isHighlight ?? false;
  });
  const _attrs = useAttrs();
  const _emits = defineEmits(["resize-item", "atomic:click"]);
  const onResize = (i, newH, newW, newHPx, newWPx) => {
    const func = () => {
      _emits("resize-item", { i, newH, newW, newHPx, newWPx });
    };
    debounce(func)();
  };
  const onMove = (v) => {
    console.log(v, "move");
  };

  watch(isHighLight, (newVal) => {
    console.log(newVal, "是否高亮====");
  });
  const onClick = () => {
    console.log("属性检测===", props.gridLayoutConfig);
    _emits("atomic:click", {
      span: w.value,
      colIdx: props.gridLayoutConfig.idx,
      rowIdx: props.idxRoute.slice(1)[0],
      id: props.gridLayoutConfig.i,
    });
  };
</script>
